<template>
  <div class="infomation">
      <a-tabs default-active-key="1" size="large">
        <a-tab-pane key="1" tab="企业信息">
            <div class="form1">
              <span class="titles1">企业logo：</span>
              <a-upload
                name="filecontent"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/img"
                :before-upload="beforeUpload"
                @change="handleChange($event, 'Disabilityimg')"
              >
                <img
                  style="width: 80px; height: 80px"
                  v-if="Disabilityimg"
                  :src="imageWebUrl + Disabilityimg"
                  alt="avatar"
                />
                <div v-else>
                  <img
                    style="width: 80px"
                    src="@/assets/image/competition/uploadImg.png"
                    alt="image"
                  />
                </div>
              </a-upload>
              <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
            </div>
            <div class="form">
              <span class="titles">企业名称：</span>
              <p>北京科技有限公司</p>
            </div>
            <div class="form">
              <span class="titles">联系人姓名：</span>
              <p>李明</p>
            </div>
            <div class="form">
              <span class="titles">信用代码：</span>
              <p>KJHLDSK8976565</p>
            </div>
            <div class="form">
              <span class="titles">联系人职务：</span>
              <p>经理</p>
            </div>
            <div class="form">
              <span class="titles">注册手机号：</span>
              <p><a-input value="18192963120" :disabled="true" placeholder="" /></p>
              <span style="cursor: pointer;position: absolute;right: 0;"><img src="@/assets/image/enterprise/pen.png" alt=""></span>
            </div>
            <div class="form">
              <span class="titles">所属行业：</span>
              <p>互联网</p>
            </div>
            <div class="certificationType">
              <p class="titles2">认证信息</p>
              <!-- 认证信息 -->
              <div class="qyxxwarp">
                <img src="@/assets/image/enterprise/yyzz.png" alt="">
                <div class="companydetails">
                  <p>单位名称：<span>有限公司</span></p>
                  <p>类 型：<span>有限责任公司(自然人投资或控股)</span></p>
                  <p>法定代表人：<span>李刚</span></p>
                  <p>住址：<span>北京市</span></p>
                </div>
                <div class="companyfj">
                  <p>注 册 资 本： <span>200万元</span></p>
                  <p>成 立 日 期：<span>2019年01月01日</span></p>
                  <p>有效日期至：<span>长期</span></p>
                </div>
              </div>
              <!-- 审核中 -->
              <div>
                <span><img src="@/assets/image/enterprise/timer.png" alt=""></span>
                <span class="mrginl10">认证审核中…</span>
              </div>
            </div>

        </a-tab-pane>
      </a-tabs>

    <Loading v-show="onLoading"></Loading>
    <!-- 认证弹窗 -->
    <div class="authenticationWarp" v-if="authshow">
      <div class="mask"></div>
      <div class="authenticationCont">
        <p class="enterauthtit">企业认证</p>
        <div class="zjclose2">
          <img src="@/assets/image/competition/close2.png" alt="">
        </div>
        <div class="zjclose" @click="authshow=false">
          <img src="@/assets/image/competition/close.png" alt="">
        </div>
        <div class="enterauthform">
          <div class="form2 mt20">
            <span class="titles">联系人姓名：</span>
            <a-input v-model:value="value" placeholder="" style="width: 250px;height: 40px;" />
          </div>
          <div class="form2 mt20">
            <span class="titles">企业名：</span>
            <a-input v-model:value="value" placeholder="" style="width: 250px;height: 40px;" />
          </div>
          <div class="form2 mt20">
            <span class="titles">统一社会信用代码：</span>
            <a-input v-model:value="value" placeholder="" style="width: 250px;height: 40px;" />
          </div>
          <div class="form2 mt20">
            <span class="titles">所在行业：</span>
            <a-input v-model:value="value" placeholder="" style="width: 250px;height: 40px;" />
          </div>
        </div>
        <div class="enterauthupload">
          <p class="uptitle">上传营业执照（盖公章）：</p>
          <!-- <div>
            <a-upload
              name="filecontent"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="/api/upload/img"
              :before-upload="beforeUpload"
              @change="handleChange($event, 'Disabilityimg')"
            >
              <img
                style="width: 80px; height: 80px"
                v-if="Disabilityimg"
                :src="imageWebUrl + Disabilityimg"
                alt="avatar"
              />
              <div v-else>
                <a-icon type="plus"></a-icon>
                <p>上传文件</p>
              </div>
            </a-upload>
            <span class="txt33">只支持.jpg，.png 格式,不能大于1G</span>
          </div> -->

          <div>
              <img src="@/assets/image/enterprise/yyzz.png" alt="">
              <div class="einfo">
                <p>单 位 名 称：有限公司</p>
                <p>类 型：有限责任公司(自然人投资或控股)</p>
                <p>法定代表人：方平</p>
                <p>住     址：广州市</p>
                <p>注 册 资 本：200万元</p>
                <p>成 立 日 期：2019年01月01日</p>
                <p>有效日期至：长期</p>
              </div>
          </div>
        </div>

        <div style="text-align: center;margin-top: 32px;">
          <a-button style="width: 108px;height: 40px;">取消</a-button>
          <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">认证</a-button>
        </div>
        <p class="txt8">注：您提交的企业身份认证信息平台将会在3个工作日内审核，审核结果会以短信的方式通知您。</p>
      </div>
    </div>

  </div>
</template>

<script>

export default {
    components: {

    },
    data(){
      return {
        loading:false,
        onLoading: false,
        fileList:[],
        authshow:true,
      }
    },
    computed: {

    },
    mounted(){

    },
    methods:{


    }
}
</script>

<style scoped lang="less">
  .txt32{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-left: -40px;
    margin-top: 56px;
  }

  .titles2{
    margin-bottom: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 22px;
  }

  .form1{
    display: flex;
    margin-left: 56px;

  }

  .titles1{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    width: 96px;
  }

  .companydetails{
    display: inline-block;
    vertical-align: middle;
    width: 390px;
    margin-left: 12px;
  }

  .companyfj{
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
  }

  .qyxxwarp{
    // width: 248px;
    height: 120px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 26px;
  }

  .qyxxwarp>img{
    width: 168px;
    height: 120px;
  }

  .mrginl10{
    margin-left: 3px;
    color:#FFBE37;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFBE37;
  }
    /deep/.ant-cascader-picker-disabled{
        color: #666666;
        background: #ffffff;
    }
    /deep/.ant-upload-picture-card-wrapper {
        zoom: 1;
        display: inline-block;
        width: auto;
    }
    /deep/.ant-upload.ant-upload-select-picture-card{
        width: 80px;
        height: 80px;
        border: 0;
            border: 1px dashed #D9D9D9;
        margin-right: 50px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    /deep/.ant-upload.ant-upload-select-picture-card > .ant-upload{
        padding: 0;
    }
    /deep/.ant-input-disabled{
        background: #FFFFFF;
        color: #333333;
    }
    .infomation{
        .ant-tabs-tabpane-active{
            padding-top: 20px;
            padding-bottom: 50px;
        }
        .certificates{
            margin-left: 56px;
            display: flex;
            .left{
                .title{
                    margin-top: 9px;
                    margin-bottom: 16px;
                    font-size: 15px;
                    color: #333333;
                    line-height: 21px;
                }
                .content{
                    display: flex;
                }
            }
            .right{
                .title{
                    margin-top: 9px;
                    margin-bottom: 16px;
                    font-size: 15px;
                    color: #333333;
                    line-height: 21px;
                }
            }
        }
        .form{
            width: 437px;
            height: 60px;
            display: flex;
            align-items: center;
            margin-left: 56px;
            border-bottom: 1px solid #EEEEEE;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            position: relative;
            p{
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 22px;
            }
            .titles{
                display: inline-block;
                width: 96px;
                height: 22px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
            }
            .message{
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                line-height: 22px;
            }
            /deep/.ant-input,.ant-calendar-picker,.ant-select{
                flex: 1;
                border: 0 !important;
                list-style: none;
                box-shadow: none !important;
            }
            /deep/.ant-select-selection{
                border: 0 !important;
                list-style: none;
                box-shadow: none !important;
            }
            .func{
                cursor: pointer;
                color: #999999;
                font-size: 13px;
            }
            i{
                width: 18px;
                height: 18px;
                cursor: pointer;
            }
            .btn{
                padding: 0 10px;
                border: 1px solid #FFBE37;
                color: #FFBE37;
                font-size: 16px;
                line-height: 30px;
                margin-left: 24px;
                cursor: pointer;
            }
        }
        // .form:nth-child(7){
        //     border: 0;
        // }
        .certificationType{
            margin-top: 20px;
            margin-left: 56px;
            margin-bottom: 56px;
        }
    }

    // 弹窗
    .authenticationCont{
      width: 612px;
      height: 553px;
      background: #FFFFFF;
      border-radius: 10px;
      z-index: 1000;
      position: fixed;
      top:0;
      left:0;
      right: 0;
      bottom: 0;
      margin:auto;
      padding:32px;
    }
    .mask{
      position: fixed;
      top:0;
      left:0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      z-index: 999;
    }
    .zjclose{
      position: absolute;
      right: 16px;
      top: 16px;
      cursor: pointer;
    }
    .zjclose2{
     position: absolute;
     right: 0px;
     top: 0px;
     cursor: pointer;
    }
    .enterauthform .titles{
      display: block;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 8px;
    }
    .form2{
      display: inline-block;
    }
    .mt20{
      margin-top:20px;
    }
    .enterauthform{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: space-between;
      align-items: center;
    }
    .enterauthtit{
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
      text-align: center;
      margin-bottom: 24px;
    }
    .enterauthupload{
      margin-top: 20px;
    }
    .uptitle{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 8px;
    }
    .txt33{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-left: -45px;
    }

    /deep/.authenticationCont .ant-upload.ant-upload-select-picture-card{
      width: 107px;
      height: 80px;
      background: #FAFAFA;
      border-radius: 2px;
      border: 1px dashed #D9D9D9;
    }
    .einfo{
      display: inline-block;
      vertical-align: top;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      margin-left: 8px;
    }
    .txt8{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #D51313;
      line-height: 12px;
      margin-top: 20px;
    }
</style>
